<template>
  <div class="mt-5 max-w-full  comment_list" :id='"comment-"+comment.id' :num='comment.id' :rating='comment.isRecommend'>
    <div class="flex space-x-3 xl:space-x-5 comment-depth-1">
      <a class='web-site-avatar' target='_blank' :href='comment.webSite ? comment.webSite:"#"' style='opacity: 1'>
        <Avatar :url="comment.avatar" />
      </a>
      <div class="content-warp w-full">
        <div class='user-info'>
          <div class='user-name'>{{ comment.nickname }}</div>
          <div class='user-badge' v-if='comment.badge'>{{ comment.badge }}</div>
          <time class='comment-time'>{{ time }}</time>
        </div>
        <div class="text-primary p-4 rounded-md relative reply comment-content" style="width: fit-content">
          <div class="commentContent flex items-center">
            <p v-html="comment.commentContent.replaceAll('\n', '<br>')"></p>
            <span @click="clickOnReply" class="cursor-pointer reply-button flex">
              <el-icon><ChatLineRound /></el-icon>
            </span>
          </div>
        </div>
        <CommentReplyForm
          v-show="show"
          :replyUserId="comment.userId"
          :initialContent="replyContent"
          @changeShow="changeShow" />
        <div class='children_box' v-if='comment.replyDTOs'>
          <transition-group name="fade">
            <CommentReplyItem
                v-for="reply in comment.replyDTOs"
                :key="reply.id"
                :reply="reply"
                :commentUserId="comment.userId" />
          </transition-group>
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
import { defineComponent, reactive, ref, toRefs, provide } from 'vue'
import Avatar from '@/components/Avatar.vue'
import CommentReplyItem from './CommentReplyItem.vue'
import CommentReplyForm from './CommentReplyForm.vue'
import { ChatLineRound } from '@element-plus/icons-vue'
import { useUserStore } from '@/stores/user'
import { ElMessage } from 'element-plus/es'

export default defineComponent({
  components: {
    ChatLineRound,
    Avatar,
    CommentReplyItem,
    CommentReplyForm
  },
  props: ['comment', 'index'],
  setup(props) {
    const comment: any = props.comment
    provide('parentId', comment.id)
    provide('index', props.index)
    const userStore = useUserStore()
    const reactiveData = reactive({
      replyContent: '' as any,
      time: props.comment.createTime as any,
      show: false as any
    })
    const changeShow = () => {
      reactiveData.show = false
    }
    const clickOnReply = () => {
      if (userStore.userInfo === '') {
        ElMessage({
          message: '请登录后评论!',
          type: 'warning'
        })
        return
      }
      reactiveData.replyContent = '@'+ comment.nickname
      reactiveData.show = true
    }
    return {
      ...toRefs(reactiveData),
      clickOnReply,
      changeShow
    }
  }
})
</script>
<style lang="scss" scoped>
.comment-item{
  position: relative;
  padding: 2rem 4rem 2rem 1rem;
  border-radius: var(--radius);
  background: var(--s-bg,rgb(0 0 0 / .025));
  box-shadow: var(--s-box-shadow);
  break-inside: avoid;
  transition: .5s;
}
.comment-content{
  background: var(--s-bg,rgba(0,0,0,.025));
  box-shadow: var(--s-box-shadow);
  padding: 0.5em var(--gap-span);
  border-radius: var(--radius);
}
.message-single .comment-content{
  background: none;
  padding: 0.5em 0;
}
@media (min-width: 1153px) {
  .comment_list::after {
    content: "风留下的第" attr(num) "号足迹";
    position: absolute;
    right: 0;
    top: 0;
    text-transform: uppercase;
    font-size: var(--font-size-small);
    line-height: 1;
    padding: 0.5em;
    background: hsl(var(--font-color) / .03);
    color: hsl(var(--font-color) / .3);
    border-radius: 0 1em;
  }
  .comment_list[rating="1"]::after {
    content: "寒烟志的第" attr(num) "号评论走了心";
    background: rgb(var(--color-sub-rgb) / .1);
    color: rgb(var(--color-sub-rgb) / .6);
  }
  .message-single .comment-item::after{
    color: #ffffff;
  }
}

.reply-button {
  color: var(--color-sub);
}
.commentContent {
  white-space: pre-line;
  word-wrap: break-word;
  word-break: break-all;
}
</style>
